/*
 * uCharts®
 * 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
 * Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
 * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
 * 复制使用请保留本段注释，感谢支持开源！
 *
 * uCharts®官方网站
 * https://www.uCharts.cn
 *
 * 开源地址:
 * https://gitee.com/uCharts/uCharts
 *
 * uni-app插件市场地址：
 * http://ext.dcloud.net.cn/plugin?id=271
 *
 */

// 通用配置项

// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
const color = [
  "#1890FF",
  "#91CB74",
  "#FAC858",
  "#EE6666",
  "#73C0DE",
  "#3CA272",
  "#FC8452",
  "#9A60B4",
  "#ea7ccc",
];

const cfe = {
  //demotype为自定义图表类型
  type: [
    "pie",
    "ring",
    "rose",
    "funnel",
    "line",
    "column",
    "area",
    "radar",
    "gauge",
    "candle",
    "demotype",
  ],
  //增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype"
  categories: ["line", "column", "area", "radar", "gauge", "candle", "demotype"],
  //instance为实例变量承载属性，option为eopts承载属性，不要删除
  instance: {},
  option: {},
  //下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
  formatter: {
    tooltipDemo1: function (res) {
      let result = "";
      for (let i in res) {
        if (i == 0) {
          result += res[i].axisValueLabel + "年销售额";
        }
        let value = "--";
        if (res[i].data !== null) {
          value = res[i].data;
        }
        // #ifdef H5
        result += "\n" + res[i].seriesName + "：" + value + " 万元";
        // #endif

        // #ifdef APP-PLUS
        result += "<br/>" + res[i].marker + res[i].seriesName + "：" + value + " 万元";
        // #endif
      }
      return result;
    },
    legendFormat: function (name) {
      return "自定义图例+" + name;
    },
    yAxisFormatDemo: function (value, index) {
      return value + "元";
    },
    seriesFormatDemo: function (res) {
      return res.name + "年" + res.value + "元";
    },
  },
  //这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。
  demotype: {
    color: color,
    //在这里填写echarts的option即可
  },
  //下面是自定义配置，请添加项目所需的通用配置
  column: {
    color: color,
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      top: 30,
      bottom: 50,
      right: 15,
      left: 40,
    },
    legend: {
      bottom: "left",
    },
    toolbox: {
      show: false,
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#666666",
      },
      axisLine: {
        lineStyle: {
          color: "#CCCCCC",
        },
      },
      boundaryGap: true,
      data: [],
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#666666",
      },
      axisLine: {
        lineStyle: {
          color: "#CCCCCC",
        },
      },
    },
    seriesTemplate: {
      name: "",
      type: "bar",
      data: [],
      barwidth: 20,
      label: {
        show: true,
        color: "#666666",
        position: "top",
      },
    },
  },
  line: {
    color: color,
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      top: 30,
      bottom: 50,
      right: 15,
      left: 40,
    },
    legend: {
      bottom: "left",
    },
    toolbox: {
      show: false,
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#666666",
      },
      axisLine: {
        lineStyle: {
          color: "#CCCCCC",
        },
      },
      boundaryGap: true,
      data: [],
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#666666",
      },
      axisLine: {
        lineStyle: {
          color: "#CCCCCC",
        },
      },
    },
    seriesTemplate: {
      name: "",
      type: "line",
      data: [],
      barwidth: 20,
      label: {
        show: true,
        color: "#666666",
        position: "top",
      },
    },
  },
  area: {
    color: color,
    title: {
      text: "",
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      top: 30,
      bottom: 50,
      right: 15,
      left: 40,
    },
    legend: {
      bottom: "left",
    },
    toolbox: {
      show: false,
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#666666",
      },
      axisLine: {
        lineStyle: {
          color: "#CCCCCC",
        },
      },
      boundaryGap: true,
      data: [],
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#666666",
      },
      axisLine: {
        lineStyle: {
          color: "#CCCCCC",
        },
      },
    },
    seriesTemplate: {
      name: "",
      type: "line",
      data: [],
      areaStyle: {},
      label: {
        show: true,
        color: "#666666",
        position: "top",
      },
    },
  },
  pie: {
    color: color,
    title: {
      text: "",
    },
    tooltip: {
      trigger: "item",
    },
    grid: {
      top: 40,
      bottom: 30,
      right: 15,
      left: 15,
    },
    legend: {
      bottom: "left",
    },
    seriesTemplate: {
      name: "",
      type: "pie",
      data: [],
      radius: "50%",
      label: {
        show: true,
        color: "#666666",
        position: "top",
      },
    },
  },
  ring: {
    color: color,
    title: {
      text: "",
    },
    tooltip: {
      trigger: "item",
    },
    grid: {
      top: 40,
      bottom: 30,
      right: 15,
      left: 15,
    },
    legend: {
      bottom: "left",
    },
    seriesTemplate: {
      name: "",
      type: "pie",
      data: [],
      radius: ["40%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: true,
        color: "#666666",
        position: "top",
      },
      labelLine: {
        show: true,
      },
    },
  },
  rose: {
    color: color,
    title: {
      text: "",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "bottom",
    },
    seriesTemplate: {
      name: "",
      type: "pie",
      data: [],
      radius: "55%",
      center: ["50%", "50%"],
      roseType: "area",
    },
  },
  funnel: {
    color: color,
    title: {
      text: "",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c}%",
    },
    legend: {
      top: "bottom",
    },
    seriesTemplate: {
      name: "",
      type: "funnel",
      left: "10%",
      top: 60,
      bottom: 60,
      width: "80%",
      min: 0,
      max: 100,
      minSize: "0%",
      maxSize: "100%",
      sort: "descending",
      gap: 2,
      label: {
        show: true,
        position: "inside",
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: "solid",
        },
      },
      itemStyle: {
        bordercolor: "#fff",
        borderwidth: 1,
      },
      emphasis: {
        label: {
          fontSize: 20,
        },
      },
      data: [],
    },
  },
  gauge: {
    color: color,
    tooltip: {
      formatter: "{a} <br/>{b} : {c}%",
    },
    seriesTemplate: {
      name: "业务指标",
      type: "gauge",
      detail: { formatter: "{value}%" },
      data: [{ value: 50, name: "完成率" }],
    },
  },
  candle: {
    xAxis: {
      data: [],
    },
    yAxis: {},
    color: color,
    title: {
      text: "",
    },
    dataZoom: [
      {
        type: "inside",
        xAxisIndex: [0, 1],
        start: 10,
        end: 100,
      },
      {
        show: true,
        xAxisIndex: [0, 1],
        type: "slider",
        bottom: 10,
        start: 10,
        end: 100,
      },
    ],
    seriesTemplate: {
      name: "",
      type: "k",
      data: [],
    },
  },
};

export default cfe;
